<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>绑定监听</h1>
         <button @click="test1">
             test1 button
         </button>
        <button @click="test2('abc')">
            test2 button
        </button>
        <button @click="test3($event)">
            test3 button
        </button>
        <button @click="test4(123,$event)">
            test4 button
        </button>

        <h2>事件修饰符</h2>
        <div style="width: 200px;height: 200px;background:red" @click="test5">
            <!-- 停止事件冒泡 -->
            <div style="width: 100px;height: 100px;background:yellow" @click.stop="test6">

            </div>
        </div>

        <!-- 阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="test7">百度一下 你就知道</a>

        <h3>按键修饰符</h3>
        <input type="text" @keyup.13="test8">
        <input type="text" @keyup.enter="test8">
    </div>
</body>
<script src="../../public/vue.dev.js"> </script>
<script>
    new Vue({
        el:'#app',
        data:{
            test1(){
                alert(123);
            },
            test2(val){
                alert(val);
            },
            test3(event){
                alert(event.target.innerHTML);
            },
            test4(val,event){
                alert(val + '-----' + event.target.innerHTML);
            },
            test5(){
                alert('out');
            },
            test6(){
                alert('inner');
            },
            test7(){
                alert('test7');
            },
            test8(event){
                alert(event.target.value);
            }
        }
    });

    /**
     * 绑定事件 @符 获取标签的内容 传$event 接收 event
     * 停止事件冒泡 @click.stop = t()
     * 阻止事件默认行为 @click.prevent = t()
     * 特殊按键绑定 @keyup.13=t() -- @keyup.enter=t()
     * */
</script>
</html>
